<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单支付</title>
    <link href="/css/init.css" rel="stylesheet" type="text/css">
    <link href="/css/zhifu.css" rel="stylesheet" type="text/css">
    <link href="/css/Navigation_bar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div th:insert="~{Navigation_bar :: top_nav}"></div>
    <div class="header">
        <div class="headerLayout">
            <div class="headerCon">
                <h1 class="heimaLogo">
                    <span class="hlogo">
                        <s></s>
                    </span>
                </h1>
                <div class="bar-box">
                    <ol class="bar">
                        <li class="step-first">
                            <div class="first-done">
                                <div class="step-name">查看购物车</div>
                                <div class="step-no"></div>
                            </div>
                        </li>
                        <li class="step-other">
                            <div class="other-done">
                                <div class="step-name">拍下商品</div>
                                <div class="step-no">2</div>
                            </div>
                        </li>
                        <li class="step-other">
                            <div class="other-done">
                                <div class="step-name">付款到支付宝</div>
                                <div class="step-no">3</div>
                            </div>
                        </li>
                        <li class="step-other">
                            <div class="other-done">
                                <div class="step-name">确认收货</div>
                                <div class="step-no">4</div>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="jet">
            <div class="address">
                <h2>选择收货地址</h2>
                <div class="list-address">
                    <!-- 地址块 -->
                    <!--<div class="addr addr-cur addr-def">

                        <div class="addr-inner">
                            <div class="addr-hd">
                                <span class="prov">辽宁</span>
                                <span class="city">沈阳</span>
                                <span>(</span>
                                <span class="name">XXX</span>
                                <span>收)</span>
                            </div>
                            <div class="addr-bd">
                                <span class="dist">沈河</span>
                                <span class="town">风雨坛</span>
                                <span class="addr-tip"></span>
                                <span class="street">大西路287-1号清文化主题酒店</span>
                                <span class="phone">15858883555</span>
                                <span class="last"></span>
                            </div>
                            <div class="addr-toolbar">
                                <a href="javascript:;" class="modify" title="修改地址">修改</a>
                            </div>
                        </div>
                        <div class="curMarker"></div>
                        &lt;!&ndash;<div class="setdefault">设为默认</div>&ndash;&gt;
                        &lt;!&ndash;<div class="defaultTip">默认地址</div>&ndash;&gt;
                        <div class="floater"></div>
                        <div class="option"></div>
                    </div>-->
                    <!--/*/ <th:block th:each="addr : ${addr}"> /*/-->
                    <div class="addr" th:attr="aid=${addr.aid}">
                        <div class="addr-inner">
                            <div class="addr-hd">
                                <span class="prov" th:text="${addr.province}">辽宁</span>
                                <span class="city" th:text="${addr.city}">沈阳</span>
                                <span>(</span>
                                <span class="name" th:text="${addr.name}">XXX</span>
                                <span>收)</span>
                            </div>
                            <div class="addr-bd">
                                <span class="dist" th:text="district">沈河</span>
                                <span class="addr-tip"></span>
                                <span class="street" th:text="${addr.address}">大西路287-1号清文化主题酒店</span>
                                <span class="phone" th:text="${addr.iphone}">15858883555</span>
                                <span class="last"></span>
                            </div>
                            <div class="addr-toolbar">
                                <a href="/user/info/show/addr" class="modify" title="修改地址">修改</a>
                            </div>
                        </div>
                        <div class="curMarker"></div>
                        <!--<div class="setdefault">设为默认</div>-->
                        <!--<div class="defaultTip">默认地址</div>-->
                        <div class="floater"></div>
                        <div class="option"></div>
                    </div>
                    <!--/*/ </th:block> /*/-->
                   <!-- <div class="addr">
                        <div class="addr-inner">
                            <div class="addr-hd">
                                <span class="prov">辽宁</span>
                                <span class="city">沈阳</span>
                                <span>(</span>
                                <span class="name">XXX</span>
                                <span>收)</span>
                            </div>
                            <div class="addr-bd">
                                <span class="dist">沈河</span>
                                <span class="town">风雨坛</span>
                                <span class="addr-tip"></span>
                                <span class="street">大西路287-1号清文化主题酒店</span>
                                <span class="phone">15858883555</span>
                                <span class="last"></span>
                            </div>
                            <div class="addr-toolbar">
                                <a href="javascript:;" class="modify" title="修改地址">修改</a>
                            </div>
                        </div>
                        <div class="curMarker"></div>
                        &lt;!&ndash;<div class="setdefault">设为默认</div>&ndash;&gt;
                        &lt;!&ndash;<div class="defaultTip">默认地址</div>&ndash;&gt;
                        <div class="floater"></div>
                        <div class="option"></div>
                    </div>
                    <div class="addr">
                        <div class="addr-inner" >
                            <div class="addr-hd">
                                <span class="prov">辽宁</span>
                                <span class="city">沈阳</span>
                                <span>(</span>
                                <span class="name">XXX</span>
                                <span>收)</span>
                            </div>
                            <div class="addr-bd">
                                <span class="dist">沈河</span>
                                <span class="town">风雨坛</span>
                                <span class="addr-tip"></span>
                                <span class="street">大西路287-1号清文化主题酒店</span>
                                <span class="phone">15858883555</span>
                                <span class="last"></span>
                            </div>
                            <div class="addr-toolbar">
                                <a href="javascript:;" class="modify" title="修改地址">修改</a>
                            </div>
                        </div>
                        <div class="curMarker"></div>
                        &lt;!&ndash;<div class="setdefault">设为默认</div>&ndash;&gt;
                        &lt;!&ndash;<div class="defaultTip">默认地址</div>&ndash;&gt;
                        <div class="floater"></div>
                        <div class="option"></div>
                    </div>-->
                </div>
                <div class="control">
                    <a href="/user/info/show/addr" class="manageAddr">管理收货地址</a>
                    <input type="button" class="addAddr" value="使用新地址">
                </div>
                <div class="orderDesc">
                    <h2 class="buy-sure">确认订单信息</h2>
                    <div class="buy-shop">
                        <div class="buy-td td-0">黑马商品</div>
                        <div class="buy-td td-1">商品属性</div>
                        <div class="buy-td td-2">单价</div>
                        <div class="buy-td td-3">数量</div>
                        <div class="buy-td td-4">优惠方式</div>
                        <div class="buy-td td-5">小计</div>
                    </div>
                </div>
                <div class="order-shop">
                    <div class="order-info">
                        <div class="xuxian">

                        </div>
                    </div>

                    <!--单个-->
                    <!--/*/ <th:block th:each="item : ${info?.commodityList}"> /*/-->
                    <div class="order-item">
                        <div class="order-iteminfo">
                            <div class="info-detail info-cell">
                                <div class="info-cell">
                                    <a href="javascript:;" class="info-img">
                                        <img th:src="${item.images}" src="/img/Shoppingcart6.jpg" alt="" class="info-img">
                                    </a>
                                </div>
                                <div class="info-cell info-msg">
                                    <a href="javascript:;" class="info-title" th:text="${item.title}">
                                        ㊣绿联iphoneX苹果XS无线充电器苹果8plus无线冲电器iPhone XR三星s8小米mix2s手机通用快充Xs max无线充
                                    </a>
                                    <div class="info-icon-list">
                                        <div class="info-icon-listinner">
                                            <a href="javascript:;" class="icon-main">
                                                <img src="/img/baozheng2-1.png" alt="">
                                            </a>
                                            <a href="javascript:;" class="icon-main">
                                                <img src="/img/baozheng3-1.png" alt="">
                                            </a>
                                            <a href="javascript:;" class="icon-main">
                                                <img src="/img/baozheng1-1.png" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="info-sku info-cell">
                                <p>
                                    <span class="hd">
                                        <span>颜色分类</span>
                                        <span>:</span>
                                    </span>
                                    <span class="bd">苹果/安卓通用款☆全新升级不发烫</span>
                                </p>
                            </div>
                            <div class="info-price info-cell" th:text="${item.price}">299.00</div>
                        </div>
                        <div class="order-quantity">
                            <span th:text="${num}">1</span>
                        </div>
                        <div class="order-promotion item-promotion">
                            <div class="item-promotion-selecter">
                                <span>省200:品牌钜惠</span>
                                <span class="widget-tips-box">
                                <img src="/img/maopaokuang1.png" alt="" class="wtip-icon">
                                </span>
                            </div>

                            <div class="item-promotion-gift"></div>
                        </div>
                        <div class="order-itemPay">
                            <span class="simple-price" th:text="${info.totalMoney}">99.90</span>
                        </div>
                        <div class="seperator"></div>
                        <div class="order-ctRailSolution"></div>
                    </div>
                    <!--/*/ </th:block> /*/-->
                    <!--商品项-->
                    <!--/*/ <th:block th:each="item : ${currentCar?.car}"> /*/-->
                    <div class="order-item">
                        <div class="order-iteminfo">
                            <div class="info-detail info-cell">
                                <div class="info-cell">
                                    <a href="javascript:;" class="info-img" >
                                        <img th:src="${item.commodity.images}" src="/img/Shoppingcart6.jpg" alt="" class="info-img">
                                    </a>
                                </div>
                                    <div class="info-cell info-msg">
                                    <a href="javascript:;" class="info-title" th:text="${item.commodity.title}">
                                        ㊣绿联iphoneX苹果XS无线充电器苹果8plus无线冲电器iPhone XR三星s8小米mix2s手机通用快充Xs max无线充
                                    </a>
                                    <div class="info-icon-list">
                                        <div class="info-icon-listinner">
                                            <a href="javascript:;" class="icon-main">
                                                <img src="/img/baozheng2-1.png" alt="">
                                            </a>
                                            <a href="javascript:;" class="icon-main">
                                                <img src="/img/baozheng3-1.png" alt="">
                                            </a>
                                            <a href="javascript:;" class="icon-main">
                                                <img src="/img/baozheng1-1.png" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="info-sku info-cell">
                                <p>
                                    <span class="hd">
                                        <span>颜色分类</span>
                                        <span>:</span>
                                    </span>
                                    <span class="bd">苹果/安卓通用款☆全新升级不发烫</span>
                                </p>
                            </div>
                            <div class="info-price info-cell" th:text="${item.commodity.price}">299.00</div>
                        </div>
                        <div class="order-quantity">
                            <span th:text="${item.count}">1</span>
                        </div>
                        <div class="order-promotion item-promotion">
                            <div class="item-promotion-selecter">
                                <span>省200:品牌钜惠</span>
                                <span class="widget-tips-box">
                                <img src="/img/maopaokuang1.png" alt="" class="wtip-icon">
                                </span>
                            </div>

                            <div class="item-promotion-gift"></div>
                        </div>
                        <div class="order-itemPay">
                            <span class="simple-price" th:text="${item.subtotal}">99.90</span>
                        </div>
                        <div class="seperator"></div>
                        <div class="order-ctRailSolution"></div>
                      </div>
                    <!--/*/ </th:block> /*/-->



                    <div class="order-orderExt">
                        <div class="order-extUser">
                            <div class="order-memo">
                                <span class="memo-name">给卖家留言：</span>
                                <div class="memo-detail">
                                    <textarea class="text-area-input" placeholder="选填:填写内容已和卖家协商确认"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="order-exInfo">
                            <div class="order-deliveryMethod">
                                <div>
                                    <div class="delivery-title">运送方式:</div>
                                    <div class="delivery-select">
                                        <div>
                                            <div class="select-item">
                                                <div class="select-info">
                                                    <div class="delivery-box">
                                                        <div>
                                                            <span>普通配送 快递 免邮</span>
                                                        </div>
                                                    </div>
                                                    <div class="sigh-text">
                                                        <img src="/img/peisongche.png" alt="" class="cainiao-icon">
                                                        <span>16:00前付款，承诺12月29日送达</span>
                                                    </div>
                                                </div>
                                                <div class="select-price">0.00</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="order-postageInsurance">
                                <div class="user-title">运费险:</div>
                                <div class="user-operate">
                                    <label>
                                        <div class="toggle-checkbox">
                                            <input class="qxbox" value="false" type="checkbox">
                                            <label class="no_check" check="1"></label>
                                        </div>
                                        <span class="trigger">运费险</span>
                                        <span class="ins-select">￥0.00购买</span>
                                    </label>
                                    <span class="widget-tips-box">
                                        <img src="/img/maopaokuang1.png" alt="" class="wtip-icon">
                                    </span>
                                    <a href="" class="widget-tips-box-a">
                                        <img src="/img/wenhao.png" alt="" class="ins-question-icon">
                                    </a>
                                </div>
                                <div class="user-price">1.50</div>
                            </div>
                        </div>
                    </div>
                    <div class="orderPay">
                        <span>合计</span>
                        <span>（含运费）</span>
                        <span class="price g_price">
                            <span>￥</span>
                            <span class="sum_price" th:text="${info.totalMoney}">188.00</span>
                        </span>
                    </div>
                    <div class="order-facility facility checked">
                        <div class="order-agencyPay toggle">
                            <label>
                                <div class="toggle-checkbox">
                                    <input type="checkbox" value="false" class="qxbox">
                                    <label class="no_check" check="1"></label>
                                </div>
                                <span class="toggle-title">找人代付</span>
                            </label>
                            <span></span>
                        </div>
                        <div class="order-anonymous toggle checked">
                            <label>
                                <div class="toggle-checkbox">
                                    <input type="checkbox" value="false" class="qxbox">
                                    <label class="no_check" check="1"></label>
                                </div>
                                <span class="toggle-title">匿名购买</span>
                            </label>
                            <span></span>
                        </div>
                    </div>
                    <div class="order-payInfo">
                        <div class="payInfo-wrapper">
                            <div class="payInfo-shadow">
                                <div class="order-realPay">
                                    <div>
                                        <span class="realPay-title">实付款：</span>
                                        <span class="order-price">￥</span>
                                        <span class="realPay-price" th:text="${info.totalMoney}">188.00</span>
                                    </div>
                                </div>
                                <div class="order-confirmAddr">
                                    <div class="confirmAddr-addr">
                                        <span class="confirmAddr-title">寄送至：</span>
                                        <span class="confirmAddr-addr-bd">
                                            <span class="prov">辽宁</span>
                                            <span class="city">沈阳</span>
                                            <span class="dist">沈河</span>
                                            <span class="street">大西路287-1号清文化主题酒店</span>
                                        </span>
                                </div>
                                    <div class="confirmAddr-addr-user">
                                        <span class="confirmAddr-title">收货人：</span>
                                        <span class="confirmAddr-addr-bd">
                                            <span>XXX</span>
                                            <span>12345678910</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="order-submitOrder">
                        <div class="wrapper"></div>
                        <a href="javascript:;" class="go-back">
                            <i>＜＜</i>
                            <span>返回购物车</span>
                        </a>
                        <a href="javascript:;" class="go-btn" role="button" th:href="@{/pay/toPay/{tid}(tid=${info.tId})}" title="提交订单">提交订单</a>
                    </div>
                    <div class="order-frontTrace"></div>

                </div>
            </div>
        </div>
    </div>
    <script src="/js/jquery-1.12.4.js"></script>
    <script src="/popBox/layer.js"></script>
    <script src="/js/zhufu.js"></script>
    <script>
        $(function(){

            $(".toggle-checkbox label").on("click",function(){
                if($(this).attr("check")==1){
                    if($(this).hasClass("no_check")){
                        $(this).removeClass("no_check");
                    }
                    $(this).addClass("check");
                    $(this).attr("check",0);
                }else{
                    if($(this).hasClass("check")){
                        $(this).removeClass("check");
                    }
                    $(this).addClass("no_check");
                    $(this).attr("check",1);
                }
            });
        });
    </script>
</body>
</html>